<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百货库存小程序原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            overflow-x: auto;
            min-width: 100vw;
        }
        .canvas {
            padding: 50px;
            width: max-content;
            min-width: 100%;
            background: #F0F2F5;
        }
        .screen {
            width: 375px;
            height: 812px;
            overflow: hidden;
            position: relative;
            margin-right: 24px;
        }
        .screens-container {
            display: flex;
            flex-direction: row;
            gap: 24px;
            padding: 20px;
        }
        .screen-title {
            font-size: 14px;
            color: #666;
            text-align: center;
            margin-top: 8px;
        }
        .page {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: white;
        }
        .content-scroll {
            overflow-y: auto;
            flex: 1;
        }
        .tab-bar {
            height: 50px;
            border-top: 1px solid #eee;
            background: white;
        }
        /* 添加网格背景 */
        .canvas {
            background-image: linear-gradient(to right, #E5E7EB 1px, transparent 1px),
                            linear-gradient(to bottom, #E5E7EB 1px, transparent 1px);
            background-size: 20px 20px;
        }
    </style>
</head>
<body>
    <div class="canvas">
        <!-- 设计说明 -->
        <div class="w-full text-center mb-8">
            <h1 class="text-3xl font-bold text-blue-600">百货库存小程序原型</h1>
            <p class="text-gray-600 mt-2">基于实际业务场景的完整解决方案</p>
        </div>

        <div class="screens-container">
            <!-- 库存页面 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page p-4">
                        <!-- 顶部搜索区域优化 -->
                        <div class="flex flex-col mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h1 class="text-xl font-bold text-gray-800">库存管理</h1>
                                <div class="flex items-center gap-2">
                                    <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path d="M3 4h13M3 8h9M3 12h9M3 16h9M3 20h9M17 8l4 4m0 0l-4 4m4-4H9"></path>
                                        </svg>
                                    </button>
                                    <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="relative">
                                <input type="search" 
                                       class="w-full pl-10 pr-4 py-2.5 bg-white rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors" 
                                       placeholder="搜索商品名称、编号...">
                                <svg class="w-5 h-5 text-gray-400 absolute left-3 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </div>
                        </div>

                        <!-- 统计卡片优化 -->
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="bg-gradient-to-br from-blue-500 to-blue-600 p-4 rounded-2xl text-white">
                                <div class="text-sm opacity-90 mb-1">总商品</div>
                                <div class="text-2xl font-bold">128</div>
                                <div class="text-xs opacity-90 mt-2">较上月 +12%</div>
                            </div>
                            <div class="bg-gradient-to-br from-red-500 to-red-600 p-4 rounded-2xl text-white">
                                <div class="text-sm opacity-90 mb-1">库存预警</div>
                                <div class="text-2xl font-bold">12</div>
                                <div class="text-xs opacity-90 mt-2">需及时处理</div>
                            </div>
                        </div>

                        <!-- 分类筛选优化 -->
                        <div class="flex gap-2 mb-6 overflow-x-auto pb-2">
                            <button class="px-4 py-2 bg-blue-500 text-white rounded-xl whitespace-nowrap">
                                全部商品
                            </button>
                            <button class="px-4 py-2 bg-white text-gray-600 rounded-xl whitespace-nowrap hover:bg-gray-100">
                                库存预警
                            </button>
                            <button class="px-4 py-2 bg-white text-gray-600 rounded-xl whitespace-nowrap hover:bg-gray-100">
                                热销商品
                            </button>
                            <button class="px-4 py-2 bg-white text-gray-600 rounded-xl whitespace-nowrap hover:bg-gray-100">
                                新品上架
                            </button>
                        </div>

                        <!-- 商品列表优化 -->
                        <div class="space-y-4">
                            <!-- 商品卡片 -->
                            <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                                <div class="flex gap-4">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" 
                                             class="w-24 h-24 rounded-xl object-cover">
                                        <div class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
                                            库存预警
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-semibold text-gray-800">运动鞋</h3>
                                                <p class="text-sm text-gray-500 mt-1">SKU: #12345</p>
                                            </div>
                                            <div class="bg-red-100 text-red-600 px-2 py-1 rounded-lg text-sm font-medium">
                                                库存: 5
                                            </div>
                                        </div>
                                        <div class="flex gap-3 mt-4">
                                            <button class="flex-1 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-colors">
                                                进货
                                            </button>
                                            <button class="flex-1 px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-colors">
                                                卖出
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 第二个商品卡片 -->
                            <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                                <div class="flex gap-4">
                                    <div class="relative">
                                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" 
                                             class="w-24 h-24 rounded-xl object-cover">
                                        <div class="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">
                                            热销商品
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-semibold text-gray-800">智能手表</h3>
                                                <p class="text-sm text-gray-500 mt-1">SKU: #12346</p>
                                            </div>
                                            <div class="bg-green-100 text-green-600 px-2 py-1 rounded-lg text-sm font-medium">
                                                库存: 25
                                            </div>
                                        </div>
                                        <div class="flex gap-3 mt-4">
                                            <button class="flex-1 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-colors">
                                                进货
                                            </button>
                                            <button class="flex-1 px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-colors">
                                                卖出
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部导航栏优化 -->
                        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2">
                            <div class="flex justify-around">
                                <button class="flex flex-col items-center p-2 text-blue-500">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                    </svg>
                                    <span class="text-xs mt-1">首页</span>
                                </button>
                                <button class="flex flex-col items-center p-2 text-gray-400">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                    <span class="text-xs mt-1">报表</span>
                                </button>
                                <button class="flex flex-col items-center p-2 text-gray-400">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <span class="text-xs mt-1">我的</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">库存页面</div>
            </div>

            <!-- 我的页面 - 简约现代风格 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page">
                        <!-- 顶部个人信息 -->
                        <div class="p-6 bg-white">
                            <div class="flex items-center justify-between mb-6">
                                <h1 class="text-xl font-bold text-gray-800">个人中心</h1>
                                <button class="p-2 hover:bg-gray-50 rounded-full transition-colors">
                                    <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                        <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </button>
                            </div>

                            <div class="flex items-center gap-5">
                                <div class="w-20 h-20 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-2xl font-bold">
                                    小王
                                </div>
                                <div class="flex-1">
                                    <h2 class="text-lg font-bold text-gray-800">店长小王</h2>
                                    <p class="text-gray-500 mt-1">ID: 888888</p>
                                    <div class="flex items-center gap-2 mt-2">
                                        <span class="px-2 py-1 bg-blue-50 text-blue-500 text-xs rounded-full">店长</span>
                                        <span class="px-2 py-1 bg-green-50 text-green-500 text-xs rounded-full">已认证</span>
                                </div>
                                </div>
                            </div>
                        </div>

                        <!-- 数据概览卡片 -->
                        <div class="mx-4 -mt-4">
                            <div class="bg-blue-500 rounded-2xl p-4 text-white shadow-lg shadow-blue-100">
                                <div class="flex items-center justify-between mb-4">
                                    <span class="text-sm opacity-90">今日数据概览</span>
                                    <button class="text-xs bg-white/20 px-2 py-1 rounded-full">
                                        查看详情
                                    </button>
                                </div>
                                <div class="grid grid-cols-3 gap-4">
                                    <div>
                                        <div class="text-2xl font-bold">128</div>
                                        <div class="text-xs mt-1 opacity-90">总商品</div>
                                    </div>
                                    <div>
                                        <div class="text-2xl font-bold">¥2.6k</div>
                                        <div class="text-xs mt-1 opacity-90">销售额</div>
                                    </div>
                                    <div>
                                        <div class="text-2xl font-bold">12</div>
                                        <div class="text-xs mt-1 opacity-90">预警</div>
                                    </div>
                                </div>
                            </div>
            </div>

                        <!-- 功能列表 -->
                        <div class="p-4 space-y-4">
                            <!-- 业务功能 -->
                            <div class="bg-white rounded-2xl p-4">
                                <h3 class="text-sm text-gray-500 mb-3">业务功能</h3>
                                <div class="grid grid-cols-4 gap-3">
                                    <button class="aspect-square bg-gray-50 rounded-2xl p-3 hover:bg-gray-100 transition-colors">
                                        <div class="w-10 h-10 mx-auto mb-2">
                                            <svg class="w-full h-full text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                                        <span class="block text-xs text-gray-600">销售报表</span>
                                    </button>
                                    <button class="aspect-square bg-gray-50 rounded-2xl p-3 hover:bg-gray-100 transition-colors">
                                        <div class="w-10 h-10 mx-auto mb-2">
                                            <svg class="w-full h-full text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                                            </svg>
                                        </div>
                                        <span class="block text-xs text-gray-600">采购记录</span>
                                    </button>
                                    <button class="aspect-square bg-gray-50 rounded-2xl p-3 hover:bg-gray-100 transition-colors">
                                        <div class="w-10 h-10 mx-auto mb-2">
                                            <svg class="w-full h-full text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                            </svg>
                                        </div>
                                        <span class="block text-xs text-gray-600">盘点记录</span>
                                    </button>
                                    <button class="aspect-square bg-gray-50 rounded-2xl p-3 hover:bg-gray-100 transition-colors">
                                        <div class="w-10 h-10 mx-auto mb-2">
                                            <svg class="w-full h-full text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                        </div>
                                        <span class="block text-xs text-gray-600">历史记录</span>
                                    </button>
                                </div>
                            </div>

                            <!-- 账户安全 -->
                            <div class="bg-white rounded-2xl p-4">
                                <h3 class="text-sm text-gray-500 mb-3">账户安全</h3>
                                <div class="space-y-2">
                                    <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-xl transition-colors">
                                        <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                                            </svg>
                                        </div>
                                        <div class="flex-1 text-left">
                                            <div class="text-gray-800">修改密码</div>
                                            <div class="text-xs text-gray-500 mt-0.5">定期更换密码更安全</div>
                                        </div>
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </button>

                                    <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-xl transition-colors">
                                        <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
                                            </svg>
                                        </div>
                                        <div class="flex-1 text-left">
                                            <div class="text-gray-800">指纹解锁</div>
                                            <div class="text-xs text-gray-500 mt-0.5">快速安全的解锁方式</div>
                                        </div>
                                        <div class="w-10 h-6 bg-gray-200 rounded-full p-1 duration-300 ease-in-out">
                                            <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out"></div>
                                        </div>
                                    </button>
                                </div>
                            </div>

                            <!-- 其他设置 -->
                            <div class="bg-white rounded-2xl p-4">
                                <h3 class="text-sm text-gray-500 mb-3">其他设置</h3>
                                <div class="space-y-2">
                                    <button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-xl transition-colors">
                                        <div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                        </div>
                                        <div class="flex-1 text-left">
                                            <div class="text-gray-800">关于我们</div>
                                            <div class="text-xs text-gray-500 mt-0.5">版本 1.0.0</div>
                                        </div>
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path d="M9 5l7 7-7 7"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <!-- 退出登录 -->
                            <button class="w-full p-4 bg-white text-red-500 font-medium rounded-2xl hover:bg-red-50 transition-colors">
                                退出登录
                            </button>
                        </div>
                    </div>
                </div>
                <div class="screen-title">我的页面</div>
            </div>

            <!-- 第二版 - 简化版本 -->
            <div class="version-two mt-8">
                <h2 class="text-2xl font-bold mb-4">简化版本 - 库存管理原型</h2>
                <p class="text-gray-600 mb-6">优化后的库存管理界面，专注于核心功能</p>

                <!-- 页面展示区域 -->
                <div class="flex gap-6 overflow-x-auto pb-4">
                    <!-- 库存页面 -->
                    <div class="screen-wrapper flex-shrink-0">
                        <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                            <div class="page p-4">
                                <!-- 顶部搜索区域 -->
                                <div class="flex justify-between items-center mb-6">
                                    <h1 class="text-xl font-bold text-gray-800">库存管理</h1>
                                    <div class="flex items-center gap-3">
                                        <div class="relative">
                                            <input type="search" 
                                                   class="pl-10 pr-4 py-2 bg-white rounded-xl border border-gray-200" 
                                                   placeholder="搜索商品...">
                                            <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>

                                <!-- 统计卡片 -->
                                <div class="grid grid-cols-2 gap-4 mb-6">
                                    <div class="bg-blue-50 p-4 rounded-2xl">
                                        <div class="text-sm text-blue-600 mb-1">总商品数</div>
                                        <div class="text-2xl font-bold text-blue-700">128</div>
                                    </div>
                                    <div class="bg-red-50 rounded-xl p-3">
                                        <div class="text-sm text-red-600 mb-1">库存预警</div>
                                        <div class="text-xl font-bold text-red-700">12</div>
                                    </div>
                                </div>

                                <!-- 商品列表 -->
                                <div class="space-y-4">
                                    <!-- 商品卡片 -->
                                    <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
                                        <div class="flex gap-4">
                                            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" 
                                                 class="w-24 h-24 rounded-xl object-cover">
                                            <div class="flex-1">
                                                <div class="flex justify-between items-start">
                                                    <div>
                                                        <h3 class="font-semibold text-gray-800">运动鞋</h3>
                                                        <p class="text-sm text-gray-500 mt-1">SKU: #12345</p>
                                                    </div>
                                                    <div class="bg-red-100 text-red-600 px-2 py-1 rounded-lg text-sm">
                                                        库存: 5
                                                    </div>
                                                </div>
                                                <div class="flex gap-3 mt-4">
                                                    <button class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                                                        进货
                                                    </button>
                                                    <button class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                                        卖出
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="screen-title">库存页面</div>
                    </div>

                    <!-- 进货弹窗展示 -->
                    <div class="screen-wrapper flex-shrink-0">
                        <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                            <div class="page bg-black/60 flex items-center justify-center backdrop-blur-sm">
                                <div class="bg-white rounded-2xl w-[320px] shadow-xl">
                                    <!-- 弹窗标题 -->
                                    <div class="p-4 flex justify-between items-center border-b border-gray-100">
                                        <div>
                                            <h3 class="text-lg font-bold text-gray-800">商品进货</h3>
                                            <p class="text-xs text-gray-500 mt-0.5">填写进货信息</p>
                                        </div>
                                        <button class="text-gray-400 hover:text-gray-600 p-1">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    </div>

                                    <!-- 商品信息 -->
                                    <div class="p-4 bg-blue-50/50">
                                        <div class="flex items-center">
                                            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" 
                                                 class="w-16 h-16 rounded-xl object-cover">
                                            <div class="ml-3 flex-1">
                                                <div class="font-semibold text-gray-800">运动鞋</div>
                                                <div class="text-xs text-gray-500 mt-1">商品编号：#SKU12345</div>
                                                <div class="flex items-center mt-1">
                                                    <div class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">
                                                        当前库存：5件
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 进货表单 -->
                                    <div class="p-4 space-y-4">
                                        <!-- 进货数量 -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">进货数量</label>
                                            <div class="flex items-center bg-gray-50 rounded-lg border border-gray-200">
                                                <button class="px-3 py-2 text-blue-500 hover:text-blue-600">-</button>
                                                <input type="number" value="1" 
                                                       class="w-full text-center bg-transparent py-2 text-gray-800">
                                                <button class="px-3 py-2 text-blue-500 hover:text-blue-600">+</button>
                                            </div>
                                        </div>

                                        <!-- 进货单价 -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">进货单价</label>
                                            <div class="relative">
                                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                    <span class="text-gray-500">¥</span>
                                                </div>
                                                <input type="number" 
                                                       class="w-full pl-8 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg"
                                                       placeholder="请输入单价">
                                            </div>
                                        </div>

                                        <!-- 公司选择 -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">选择公司</label>
                                            <select class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
                                                <option>请选择公司</option>
                                                <option>公司A</option>
                                                <option>公司B</option>
                                            </select>
                                        </div>

                                        <!-- 总金额展示 -->
                                        <div class="bg-gray-50 rounded-xl p-4">
                                            <div class="flex justify-between items-center">
                                                <span class="text-gray-500">预计总金额</span>
                                                <span class="text-xl font-bold text-blue-600">¥299.00</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 底部按钮 -->
                                    <div class="p-4 bg-gray-50 rounded-b-2xl">
                                        <div class="flex gap-3">
                                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-gray-200 text-gray-600 font-medium">
                                                取消
                                            </button>
                                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-blue-500 text-white font-medium">
                                                确认进货
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="screen-title">进货弹窗</div>
                    </div>

                    <!-- 卖出弹窗展示 -->
                    <div class="screen-wrapper flex-shrink-0">
                        <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                            <div class="page bg-black/60 flex items-center justify-center backdrop-blur-sm">
                                <div class="bg-white rounded-2xl w-[320px] shadow-xl">
                                    <!-- 弹窗标题 -->
                                    <div class="p-4 flex justify-between items-center border-b border-gray-100">
                                        <div>
                                            <h3 class="text-lg font-bold text-gray-800">商品卖出</h3>
                                            <p class="text-xs text-gray-500 mt-0.5">填写销售信息</p>
                                        </div>
                                        <button class="text-gray-400 hover:text-gray-600 p-1">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    </div>

                                    <!-- 商品信息 -->
                                    <div class="p-4 bg-green-50/50">
                                        <div class="flex items-center">
                                            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" 
                                                 class="w-16 h-16 rounded-xl object-cover">
                                            <div class="ml-3 flex-1">
                                                <div class="font-semibold text-gray-800">运动鞋</div>
                                                <div class="text-xs text-gray-500 mt-1">商品编号：#SKU12345</div>
                                                <div class="flex items-center mt-1">
                                                    <div class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">
                                                        当前库存：5件
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 卖出表单 -->
                                    <div class="p-4 space-y-4">
                                        <!-- 卖出数量 -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">卖出数量</label>
                                            <div class="flex items-center bg-gray-50 rounded-lg border border-gray-200">
                                                <button class="px-3 py-2 text-green-500 hover:text-green-600">-</button>
                                                <input type="number" value="1" 
                                                       class="w-full text-center bg-transparent py-2 text-gray-800">
                                                <button class="px-3 py-2 text-green-500 hover:text-green-600">+</button>
                                            </div>
                                        </div>

                                        <!-- 卖出单价 -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">卖出单价</label>
                                            <div class="relative">
                                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                    <span class="text-gray-500">¥</span>
                                                </div>
                                                <input type="number" value="299"
                                                       class="w-full pl-8 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg">
                                            </div>
                                        </div>

                                        <!-- 总金额展示 -->
                                        <div class="bg-gray-50 rounded-xl p-4">
                                            <div class="flex justify-between items-center">
                                                <span class="text-gray-500">销售总额</span>
                                                <span class="text-xl font-bold text-green-600">¥299.00</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 底部按钮 -->
                                    <div class="p-4 bg-gray-50 rounded-b-2xl">
                                        <div class="flex gap-3">
                                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-gray-200 text-gray-600 font-medium">
                                                取消
                                            </button>
                                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-green-500 text-white font-medium">
                                                确认卖出
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="screen-title">卖出弹窗</div>
                    </div>
                </div>
            </div>

            <!-- 销售记录页面 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page p-4">
                        <!-- 顶部标题区域 -->
                        <div class="flex justify-between items-center mb-6">
                            <h1 class="text-xl font-bold text-gray-800">销售记录</h1>
                            <div class="flex items-center gap-2">
                                <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M3 4h13M3 8h9M3 12h9M3 16h9M3 20h9M17 8l4 4m0 0l-4 4m4-4H9"></path>
                                    </svg>
                                </button>
                                <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <!-- 销售统计卡片 -->
                        <div class="bg-blue-500 p-4 rounded-2xl text-white mb-6">
                            <div class="text-sm opacity-90 mb-1">今日销售额</div>
                            <div class="text-2xl font-bold">¥2,580.00</div>
                            <div class="flex items-center justify-between mt-4 text-sm">
                                <div>
                                    <div class="opacity-90">订单数</div>
                                    <div class="font-medium mt-0.5">12</div>
                                </div>
                                <div>
                                    <div class="opacity-90">商品数</div>
                                    <div class="font-medium mt-0.5">25</div>
                                </div>
                                <div>
                                    <div class="opacity-90">客单价</div>
                                    <div class="font-medium mt-0.5">¥215</div>
                                </div>
                            </div>
                        </div>

                        <!-- 销售记录列表 -->
                        <div class="space-y-4">
                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h3 class="font-semibold text-gray-800">运动鞋</h3>
                                        <p class="text-sm text-gray-500 mt-0.5">订单号：#ORD12345</p>
                                    </div>
                                    <div class="text-green-600 font-medium">+¥299.00</div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">数量：1件</div>
                                    <div class="text-gray-500">2024-03-20 14:30</div>
                                </div>
                            </div>

                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h3 class="font-semibold text-gray-800">智能手表</h3>
                                        <p class="text-sm text-gray-500 mt-0.5">订单号：#ORD12344</p>
                                    </div>
                                    <div class="text-green-600 font-medium">+¥899.00</div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">数量：2件</div>
                                    <div class="text-gray-500">2024-03-20 13:15</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">销售记录</div>
            </div>

            <!-- 进货记录页面 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page p-4">
                        <!-- 顶部标题区域 -->
                        <div class="flex justify-between items-center mb-6">
                            <h1 class="text-xl font-bold text-gray-800">进货记录</h1>
                            <div class="flex items-center gap-2">
                                <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M3 4h13M3 8h9M3 12h9M3 16h9M3 20h9M17 8l4 4m0 0l-4 4m4-4H9"></path>
                                    </svg>
                                </button>
                                <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-xl">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <!-- 进货统计卡片 -->
                        <div class="bg-blue-500 p-4 rounded-2xl text-white mb-6">
                            <div class="text-sm opacity-90 mb-1">本月进货支出</div>
                            <div class="text-2xl font-bold">¥15,280.00</div>
                            <div class="flex items-center justify-between mt-4 text-sm">
                                <div>
                                    <div class="opacity-90">订单数</div>
                                    <div class="font-medium mt-0.5">8</div>
                                </div>
                                <div>
                                    <div class="opacity-90">商品数</div>
                                    <div class="font-medium mt-0.5">120</div>
                                </div>
                                <div>
                                    <div class="opacity-90">平均单价</div>
                                    <div class="font-medium mt-0.5">¥127</div>
                                </div>
                            </div>
                        </div>

                        <!-- 进货记录列表 -->
                        <div class="space-y-4">
                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h3 class="font-semibold text-gray-800">运动鞋</h3>
                                        <p class="text-sm text-gray-500 mt-0.5">公司：公司A</p>
                                    </div>
                                    <div class="text-red-600 font-medium">-¥4,500.00</div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">数量：30件</div>
                                    <div class="text-gray-500">2024-03-15 10:30</div>
                                </div>
                            </div>

                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h3 class="font-semibold text-gray-800">智能手表</h3>
                                        <p class="text-sm text-gray-500 mt-0.5">公司：公司B</p>
                                    </div>
                                    <div class="text-red-600 font-medium">-¥6,000.00</div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">数量：20件</div>
                                    <div class="text-gray-500">2024-03-10 09:15</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">进货记录</div>
            </div>

            <!-- 报表页面 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page p-4">
                        <!-- 顶部标题区域 -->
                        <div class="flex justify-between items-center mb-6">
                            <h1 class="text-xl font-bold text-gray-800">数据报表</h1>
                            <div class="flex items-center gap-2">
                                <select class="text-sm bg-white border border-gray-200 rounded-xl px-3 py-2">
                                    <option>本月</option>
                                    <option>上月</option>
                                    <option>近三月</option>
                                </select>
                            </div>
                        </div>

                        <!-- 主要数据卡片 -->
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="bg-green-500 p-4 rounded-2xl text-white">
                                <div class="text-sm opacity-90 mb-1">销售总额</div>
                                <div class="text-xl font-bold">¥25,680</div>
                                <div class="text-xs opacity-90 mt-2">较上月 +12.5%</div>
                            </div>
                            <div class="bg-red-500 p-4 rounded-2xl text-white">
                                <div class="text-sm opacity-90 mb-1">支出总额</div>
                                <div class="text-xl font-bold">¥15,280</div>
                                <div class="text-xs opacity-90 mt-2">较上月 -5.2%</div>
                            </div>
                        </div>

                        <!-- 图表区域 -->
                        <div class="bg-white p-4 rounded-2xl shadow-sm mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-semibold text-gray-800">销售趋势</h3>
                                <div class="flex gap-2">
                                    <div class="flex items-center gap-1">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                        <span class="text-xs text-gray-500">销售额</span>
                                    </div>
                                    <div class="flex items-center gap-1">
                                        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                        <span class="text-xs text-gray-500">订单数</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 图表占位 -->
                            <div class="h-40 bg-gray-50 rounded-xl flex items-center justify-center text-gray-400">
                                图表区域
                            </div>
                        </div>

                        <!-- 热销商品列表 -->
                        <div class="bg-white p-4 rounded-2xl shadow-sm">
                            <h3 class="font-semibold text-gray-800 mb-4">热销商品</h3>
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gray-100 rounded-xl mr-3"></div>
                                    <div class="flex-1">
                                        <div class="flex justify-between">
                                            <div class="font-medium text-gray-800">运动鞋</div>
                                            <div class="text-green-600">¥8,970</div>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <div class="text-gray-500">销量：30件</div>
                                            <div class="text-gray-500">占比：35%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-gray-100 rounded-xl mr-3"></div>
                                    <div class="flex-1">
                                        <div class="flex justify-between">
                                            <div class="font-medium text-gray-800">智能手表</div>
                                            <div class="text-green-600">¥5,394</div>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <div class="text-gray-500">销量：18件</div>
                                            <div class="text-gray-500">占比：21%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">数据报表</div>
            </div>

            <!-- 无权限页面 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page flex flex-col items-center justify-center p-8 text-center">
                        <!-- 锁定图标 -->
                        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-6">
                            <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                        </div>

                        <!-- 提示文本 -->
                        <h2 class="text-xl font-bold text-gray-800 mb-2">
                            暂无访问权限
                        </h2>
                        <p class="text-gray-500 mb-6">
                            您当前没有权限查看此页面内容<br>
                            请联系管理员开通相关权限
                        </p>

                        <!-- 联系方式 -->
                        <div class="bg-white p-4 rounded-xl w-full mb-6">
                            <div class="flex items-center justify-between text-sm text-gray-600 mb-2">
                                <span>联系管理员：</span>
                                <span>admin@example.com</span>
                            </div>
                            <div class="flex items-center justify-between text-sm text-gray-600">
                                <span>联系电话：</span>
                                <span>400-123-4567</span>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="flex gap-3 w-full">
                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-gray-200 text-gray-600 font-medium hover:bg-gray-300 transition-colors">
                                输入激活码
                            </button>
                            <button class="flex-1 px-4 py-2.5 rounded-xl bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors">
                                申请权限
                            </button>
                        </div>
                    </div>
                </div>
                <div class="screen-title">无权限页面</div>
            </div>

            <!-- 激活码输入页面（优化版） -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page flex flex-col items-center p-8">
                        <!-- 顶部Logo区域 -->
                        <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-blue-100">
                            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                            </svg>
                        </div>

                        <!-- 欢迎文本 -->
                        <h2 class="text-xl font-bold text-gray-800 mb-2 text-center">
                            欢迎使用库存管理系统
                        </h2>
                        <p class="text-gray-500 mb-8 text-center">
                            请输入激活码以开始使用完整功能
                        </p>

                        <!-- 激活码输入区域 -->
                        <div class="w-full space-y-6">
                            <!-- 输入框组 -->
                            <div class="flex justify-between gap-3">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                                <input type="text" maxlength="1" 
                                       class="w-14 h-14 bg-white rounded-xl border-2 border-gray-200 text-center text-xl font-bold text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all uppercase">
                            </div>

                            <!-- 激活按钮 -->
                            <button class="w-full px-4 py-3.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all shadow-lg shadow-blue-100">
                                立即激活
                            </button>

                            <!-- 提示信息 -->
                            <div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
                                <div class="flex items-start">
                                    <svg class="w-5 h-5 text-blue-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div class="ml-3 flex-1">
                                        <p class="text-sm text-blue-800 font-medium">激活码说明</p>
                                        <ul class="mt-2 text-xs text-blue-700 space-y-1">
                                            <li>• 激活码为6位字母或数字组合</li>
                                            <li>• 激活码区分大小写</li>
                                            <li>• 激活后即可永久使用</li>
                                            <li>• 一个激活码仅支持一台设备使用</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- 获取激活码 -->
                            <div class="text-center">
                                <p class="text-sm text-gray-500 mb-2">
                                    还没有激活码？
                                </p>
                                <div class="flex gap-4 justify-center text-sm">
                                    <button class="text-blue-500 hover:text-blue-600 font-medium">
                                        联系客服
                                    </button>
                                    <button class="text-blue-500 hover:text-blue-600 font-medium">
                                        购买激活码
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">激活码输入</div>
            </div>

            <!-- 生成激活码页面（管理员） -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page p-4">
                        <!-- 顶部标题 -->
                        <div class="flex justify-between items-center mb-6">
                            <h1 class="text-xl font-bold text-gray-800">激活码管理</h1>
                            <button class="p-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 4v16m8-8H4"></path>
                                </svg>
                            </button>
                        </div>

                        <!-- 生成激活码表单 -->
                        <div class="bg-white p-4 rounded-2xl shadow-sm mb-6">
                            <h3 class="font-semibold text-gray-800 mb-4">生成新激活码</h3>
                            <div class="space-y-4">
                                <!-- 数量选择 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">生成数量</label>
                                    <div class="flex items-center bg-gray-50 rounded-lg border border-gray-200">
                                        <button class="px-3 py-2 text-blue-500 hover:text-blue-600">-</button>
                                        <input type="number" value="1" min="1" max="100"
                                               class="w-full text-center bg-transparent py-2 text-gray-800">
                                        <button class="px-3 py-2 text-blue-500 hover:text-blue-600">+</button>
                                    </div>
                                </div>

                                <!-- 有效期选择 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">使用期限</label>
                                    <select class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
                                        <option>永久有效</option>
                                        <option>1个月</option>
                                        <option>3个月</option>
                                        <option>6个月</option>
                                        <option>12个月</option>
                                    </select>
                                </div>

                                <!-- 生成按钮 -->
                                <button class="w-full px-4 py-2.5 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600">
                                    生成激活码
                                </button>
                            </div>
                        </div>

                        <!-- 激活码列表 -->
                        <div class="space-y-4">
                            <!-- 激活码卡片 -->
                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="font-mono font-bold text-lg text-gray-800">ABC123</div>
                                    <div class="bg-green-100 text-green-600 px-2 py-0.5 rounded-full text-xs">
                                        未使用
                                    </div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">生成时间：2024-03-20</div>
                                    <div class="text-gray-500">永久有效</div>
                                </div>
                                <div class="flex gap-2 mt-3">
                                    <button class="flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50">
                                        复制
                                    </button>
                                    <button class="flex-1 px-3 py-1.5 text-sm border border-red-200 rounded-lg text-red-600 hover:bg-red-50">
                                        作废
                                    </button>
                                </div>
                            </div>

                            <div class="bg-white p-4 rounded-2xl shadow-sm">
                                <div class="flex justify-between items-start mb-3">
                                    <div class="font-mono font-bold text-lg text-gray-800">XYZ789</div>
                                    <div class="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full text-xs">
                                        已使用
                                    </div>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <div class="text-gray-500">生成时间：2024-03-19</div>
                                    <div class="text-gray-500">永久有效</div>
                                </div>
                                <div class="text-xs text-gray-500 mt-2">
                                    使用设备：iPhone 13 Pro
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">激活码管理</div>
            </div>

            <!-- 设置库存预警弹窗 -->
            <div class="screen-wrapper flex-shrink-0">
                <div class="screen bg-gray-50 rounded-3xl shadow-xl w-[375px]">
                    <div class="page bg-black/60 flex items-center justify-center backdrop-blur-sm">
                        <div class="bg-white rounded-2xl w-[320px] shadow-xl">
                            <!-- 弹窗标题 -->
                            <div class="p-4 flex justify-between items-center border-b border-gray-100">
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">设置库存预警</h3>
                                    <p class="text-xs text-gray-500 mt-0.5">当库存低于预警值时将收到提醒</p>
                                </div>
                                <button class="p-2 hover:bg-gray-100 rounded-xl transition-colors">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>

                            <!-- 商品信息 -->
                            <div class="p-4 bg-blue-50/50">
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" 
                                         class="w-16 h-16 rounded-xl object-cover">
                                    <div class="ml-3 flex-1">
                                        <div class="font-semibold text-gray-800">运动鞋</div>
                                        <div class="text-xs text-gray-500 mt-1">商品编号：#SKU12345</div>
                                        <div class="flex items-center mt-1">
                                            <div class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">
                                                当前库存：15件
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 预警设置表单 -->
                            <div class="p-4 space-y-4">
                                <!-- 预警数量 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        预警数量
                                        <span class="text-xs text-gray-500 font-normal ml-1">（低于该数量将触发预警）</span>
                                    </label>
                                    <div class="flex items-center">
                                        <button class="w-12 h-12 bg-gray-50 border border-gray-200 rounded-l-xl flex items-center justify-center text-gray-600 hover:bg-gray-100 transition-colors">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M20 12H4"></path>
                                            </svg>
                                        </button>
                                        <input type="number" value="10" 
                                               class="h-12 w-full text-center border-y border-gray-200 text-gray-800 text-lg font-medium">
                                        <button class="w-12 h-12 bg-gray-50 border border-gray-200 rounded-r-xl flex items-center justify-center text-gray-600 hover:bg-gray-100 transition-colors">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 4v16m8-8H4"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- 预警方式 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">预警方式</label>
                                    <div class="space-y-2">
                                        <label class="flex items-center p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors">
                                            <input type="checkbox" checked class="w-4 h-4 text-blue-500 rounded">
                                            <span class="ml-3 text-gray-700">系统通知</span>
                                        </label>
                                        <label class="flex items-center p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors">
                                            <input type="checkbox" checked class="w-4 h-4 text-blue-500 rounded">
                                            <span class="ml-3 text-gray-700">短信提醒</span>
                                        </label>
                                    </div>
                                </div>

                                <!-- 提示信息 -->
                                <div class="bg-yellow-50 p-3 rounded-xl flex items-start">
                                    <svg class="w-5 h-5 text-yellow-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <p class="ml-2 text-sm text-yellow-700">
                                        设置预警后，当商品库存低于预警数量时，系统将自动发送提醒通知。
                                    </p>
                                </div>
                            </div>

                            <!-- 底部按钮 -->
                            <div class="p-4 bg-gray-50 rounded-b-2xl">
                                <div class="flex gap-3">
                                    <button class="flex-1 px-4 py-2.5 rounded-xl bg-gray-200 text-gray-600 font-medium hover:bg-gray-300 transition-colors">
                                        取消
                                    </button>
                                    <button class="flex-1 px-4 py-2.5 rounded-xl bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors">
                                        确认设置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="screen-title">库存预警设置</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
